<template>
    <div class="table-footer" v-if="total > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formline.page"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="formline.psize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
</template>

<script>
    export default {
        props: {
            total: {
                type: Number,
                default: 0
            },
            pageSize: {
                type: Number,
                default: 10
            },
        },
        data() {
            return {
                formline: {
                    total:0,
                    page: 1,
                    psize: this.pageSize
                }
            }
        },
        methods: {
            handleSizeChange (val) {
                console.log('handleSizeChange', val)
                this.formline.psize = val
                this.$emit('changePage', this.formline)
            },
            handleCurrentChange (val) {
                this.formline.page = val
                console.log('handleCurrentChange', val)

                this.$emit('changePage', this.formline)

            }

        }
        
    }
</script>

<style lang="less" scoped>
  .table-footer {
      text-align: center;
      padding: 15px 0;
  }
</style>